<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block title %}高校图书馆推荐系统{% endblock title %}</title>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href="{{ url_for('static', filename='css/base.css') }}"" />
    <script type=" text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>

    <style type="text/css">
        .thumbnail p,
        .thumbnail h4 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .star-rating {
            line-height: 32px;
            font-size: 1.25em;
        }

        .star-rating .fa-star {
            color: yellow;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/basic.min.css" />

    <script type="application/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js">
        </script>
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">

            <!-- Header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavBar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">推荐系统前端API展示</a>
            </div>

            <!-- Items -->
            <div class="collapse navbar-collapse" id="topNavBar">
                <ul class="nav navbar-nav ">
                    <li><a href="{{ url_for('root_func') }}">&nbsp; 主页</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="panel panel-default" style="margin:20px;">
            <h3 style="color: rgb(13, 27, 155);margin-left:20px;">GPU服务器状态：</h3>
            {% if connect.check_server() == 'normal' %}
            <h4 style="margin-left: 20px;color:chartreuse;">空闲</h4>
            {% elif connect.check_server() == 'running' %}
            <h4 style="margin-left: 20px;color:rgb(42, 90, 168);">运行中</h4>
            {% elif connect.check_server() == 'fail' %}
            <h4 style="margin-left: 20px;color:rgb(218, 30, 30);">连接中断</h4>
            {% endif %}
            <h4 style="margin-left: 20px;">GPU日志：{{ status.gpu_status() }}</h4>
            <h4 style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-left: 20px;">错误日志：{{
                status.error_status() }}</h4>
        </div>

        <div class="panel panel-default" style="margin:20px;">
            <h3 style="color: rgb(13, 27, 155);margin-left:20px;">查看ElasticSearch日志：</h3>
            <div class="row" style="margin: 20px;">
                <div class="col-sm-1 col-md-1">
                    <a href="{{ conf['kib_loss_ip'] }}">
                        <button class="btn btn-primary">Loss曲线</button>
                    </a>
                </div>
                <div class="col-sm-1 col-md-1">
                    <a href="{{ conf['kib_info_ip'] }}">
                        <button class="btn btn-primary">数据面板</button>
                    </a>
                </div>
                <div class="col-sm-1 col-md-1">
                    <a href="{{ conf['kib_train_ip'] }}">
                        <button class="btn btn-primary">GPU日志</button>
                    </a>
                </div>
                <div class="col-sm-1 col-md-1">
                    <a href="{{ conf['kib_frontend_ip'] }}">
                        <button class="btn btn-primary">前端日志</button>
                    </a>
                </div>
                <div class="col-sm-1 col-md-1">
                    <a href="{{ conf['kib_error_ip'] }}">
                        <button class="btn btn-primary">错误日志</button>
                    </a>
                </div>
            </div>
        </div>

        <br>
        <div class="panel panel-default" style="margin:20px;">
            <h3 style="color: rgb(13, 27, 155);margin-left:20px;">个性化推荐请求：</h3>
            <form class="form-horizontal" action="{{ url_for('rec_form') }}" method="post">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="id_username">
                        用户名:
                    </label>
                    <div class="col-sm-10">
                        <input id="id_username" maxlength="30" name="username" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </form>
        </div>

        <br>
        <div class="panel panel-default" style="margin:20px;">
            <h3 style="color: rgb(13, 27, 155);margin-left:20px;">上传文件到服务器：</h3>
            <form action="/upload_file" class="dropzone dz-clickable" id="dropper" enctype="multipart/form-data"
                style="margin: 20px;">
            </form>

            <script type="application/javascript">
                Dropzone.options.dropper = {
                    paramName: 'file',
                    chunking: true,
                    forceChunking: true,
                    url: '/upload_file',
                    maxFilesize: 1025, // megabytes
                    chunkSize: 1000000 // bytes
                }
            </script>

            {% for file in file_list %}
            <div class="row">
                <div class="col-sm-3 col-md-3 col-xs-6 col-lg-2">
                    <form action="{{ url_for('delete_file_view') }}" method='POST'>
                        <p style="margin-left: 20px;">{{ file['name'] }}
                            <button class="btn btn-primary" style="margin-left: 20px;" type="submit" name="delete"
                                value="{{ file['name'] }}">删除</button>
                        </p>
                    </form>
                </div>
                <div class="col-sm-1 col-md-1">
                    <a href="/download/{{ file['name'] }}">
                        <button class="btn btn-primary" style="margin-left: 20px;">下载</button>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>

        <br>
        <div class="panel panel-default" style="margin:20px;">
            <h3 style="color: rgb(13, 27, 155);margin-left:20px;">训练控制：</h3>
            <div class="row">
                <div class="col-sm-3 col-md-1 col-xs-6">
                    <form action="{{ url_for('start_train') }}" method='POST' style="margin: 20px;">
                        <button type="submit" class="btn btn-primary">开始训练</button>
                    </form>
                </div>
                <div class="col-sm-3 col-md-1 col-xz-6">
                    <form action="{{ url_for('stop_train') }}" method='POST' style="margin: 20px;">
                        <button type="submit" class="btn btn-primary">停止训练</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>